<template>
    <div style="width:360px">
        <el-table :data="tableData" border style="width: 100%">
            <el-table-column prop="text" label="姓名" width="180" ></el-table-column>
            <el-table-column label="状态" width="180" >
                <template #default="scope">
                    <span style="margin-right:20px">
                        {{scope.row.state}}
                    </span>
                    <el-switch v-model="scope.row.state"/>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script lang="ts" setup>
import { reactive } from 'vue';

const tableList = reactive([
    {"cell1":{ "text": "李四1", "state": true }, "cell2": { "text": "李四4", "state": true }, "cell3": { "text": "李四13", "state": true } }, 
    {"cell": { "text": "李四1", "state": true }, "cell2": { "text": "李四2", "state": true }, "cell3": { "text": "李四13", "state": false } }, 
    {"cell": { "text": "王五7", "state": true }, "cell2": { "text": "李四2", "state": true }, "cell3": { "text": "李四9", "state": false } }
])

const tableData = reactive([])

function headlreList () {
    tableList.forEach(item =>{

        // 获取所有的key
        // Object.keys(item).forEach(keys =>{
        //     tableData.push((item as never)[keys])
        // })

        for (const key in item) {
            tableData.push((item as never)[key])
        }

        // tableData.push(...Object.values(item))
    })


}
headlreList()
</script>

<style lang="less" scoped>

</style>